<template>
  <div class="bw-node-attr-color-picker">
    <ColorPicker v-bind="props" v-model:value="content" />
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

import { ColorPicker } from '@bitwit/icon'

interface BwColorPickerProps {
  value?: string
  theme?: 'dark' | 'light'
  height?: number
  width?: number
  colors?: string[]
  btn?: boolean
  zIndex?: number
  size?: 'small' | 'medium' | 'mini'
}

const emit = defineEmits(['update:value'])
const props = withDefaults(defineProps<BwColorPickerProps>(), {})

const content = computed({
  get: () => props.value,
  set: (value) => emit('update:value', value),
})
</script>

<style lang="less" scoped>
.bw-node-attr-color-picker {
  width: 100%;
  height: auto;
}
</style>
